<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>账号安全</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="searchlist">
			 <router-link to="/personalinfor" active-class="hover">个人信息</router-link>
			 <router-link to="/accountinfo" active-class="hover">账号安全</router-link>
		</div>
		<div class="mainContent">
			<h3>账号安全</h3>
			<div style="margin-top:24px;">
				<span>账号信息：</span>
				<el-input v-model="schoolname" placeholder="示例学校名称"></el-input>
			</div>
			<div style="margin-top:24px;">
				<span>账号：</span>
				<el-input v-model="userid" placeholder="123456789"></el-input>
			</div>
			<div style="margin-top:24px;">
				<span>密码：</span>
				<div>
					<el-input v-model="userid" placeholder="123456789"></el-input>
					<p>修改密码</p>
				</div>
			</div>
			<div style="margin-top:24px;">
				<b class="bbuttonbc">保存</b>
				<em class="bbuttonfh">返回</em>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	export default{
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:70px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.mainContent{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		margin:24px auto 0;
		background:#fff;
		box-shadow: 0 4px 16px 0 #5572921a;
		border-radius: 14px;
		padding:44px 0 20px 55px;
	}
	.mainContent ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.mainContent ul li{
		width: 270px;
		height: 290px;
		background:url(../../assets/image/school/downbj.png) no-repeat;
		background-size:contain;
		text-align: center;
	}
	.mainContent ul li span{
		display: block;
		margin:0 auto;
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		line-height:34px;
		margin-top:44px;
	}
	.mainContent ul li b{
		display: block;
		font-weight: 700;
		font-size: 18px;
		color: #2A303B;
		padding-top:50px;
	}
	.mainContent ul li p{
		padding-top:30px;
	}
	.mainContent ul li p i{
		display: block;
		color: #8e96a4;
		font-size: 14px;
		font-style: normal;
		line-height:32px;
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin:14px auto 0;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
	.mainContent div{
		display: flex;
		align-items: center;
	}
	.mainContent div span{
		width:80px;
		color:#557292;
		font-size:14px;
	}
	.mainContent div >>> .el-input__inner{
		width: 220px;
		height: 34px;
		border: 1px solid #D8E4F0;
		border-radius: 10px;
	}
	.mainContent p{
		width:100px;
		font-size:14px;
		color:#295CFF;
		cursor: pointer;
	}
	.bbuttonbc,.bbuttonfh{
		display: inline-block;
		width: 124px;
		height: 34px;
		border-radius: 10px;
		font-size: 14px;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.bbuttonbc{
		background: #295CFF;
		color:#fff;
	}
	.bbuttonfh{
		background: #F2F6FB;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
</style>